﻿@{
    Layout = null;
}

<script src="@Url.Content("~/scripts/friends.js")"></script>

<div class="bigBox well container">

    <div class="navbar-inner">
        <span class="form-search">
            <span class="input-append">
            <input type="text" class="span2 search-query">
            <button type="submit" class="btn searchFriends">Pesquisar</button>
            </span>
        </span>
        
        <ul class="nav nav-pills">
            <li class="guide-01 active"><a href="#">Amigos</a></li>
            <li class="guide-02"><a href="#">Desconhecidos</a></li>
            <li class="guide-03"><a href="#">Amigos de Amigos</a></li>
        </ul>

        <div class="control-group">
          <label class="control-label" for="inputIcon">Convidar um amigo</label>
          <div class="controls">
            <div class="input-prepend">
              <span class="add-on"><i class="envelope"></i></span>
              <input class="span2" id="inputIcon" type="text" placeholder="Email">
            </div>
          </div>
          <button class="btn btn-small btn-inverse">Enviar</button>
        </div>
    </div>

    <div class="contentFriends">
        <ul class="thumbnails mainFriends">
          <li class="photoFriends"> <a href="#" class="thumbnail friend-01"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-02"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-03"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-04"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-05"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-06"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-07"> </a></li>
          <li class="photoFriends ult"> <a href="#" class="thumbnail friend-08"> </a></li>
        </ul>

        <ul class="thumbnails mainFriends">
          <li class="nameFriends"><span id="1" class="del label label-inverse" onmouseover="mudar('Anderson Rodrigues', 1)">Anderson Rodrigues  </span></li>
          <li class="nameFriends"><span id="2" class="del label label-inverse" onmouseover="mudar('Bruno Takiro  ', 2)">Bruno Takiro            </span></li>
          <li class="nameFriends"><span id="3" class="del label label-inverse" onmouseover="mudar('Carol Gago  ', 3)">Carol Gago                </span></li>
          <li class="nameFriends"><span id="4" class="del label label-inverse" onmouseover="mudar('Eliane Misong   ', 4)">Eliane Misong         </span></li>
          <li class="nameFriends"><span id="5" class="del label label-inverse" onmouseover="mudar('Fiorella Castelo ', 5)">Fiorella Castelo     </span></li>
          <li class="nameFriends"><span id="6" class="del label label-inverse" onmouseover="mudar('Gabriele Mello  ', 6)">Gabriele Mello        </span></li>
          <li class="nameFriends"><span id="8" class="del label label-inverse" onmouseover="mudar('Giovanna Palhares ', 8)">Giovanna Palhares   </span></li>
          <li class="nameFriends ult"><span id="9" class="del label label-inverse" onmouseover="mudar('Guilherme Mattos', 9)">Guilherme Mattos  </span></li>
        </ul>

        <ul class="thumbnails mainFriends">
          <li class="photoFriends"> <a href="#" class="thumbnail friend-15"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-09"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-10"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-11"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-12"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-13"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-14"> </a></li>
          <li class="photoFriends ult del"> <a href="#" class="thumbnail friend-16"> </a></li>
          <li class="photoFriends new ult"> <a href="#" class="thumbnail friend-23"> </a></li>
        </ul>

        <ul class="thumbnails mainFriends">
          <li class="nameFriends"><span id="10" class="del label label-inverse" onmouseover="mudar('Ingrid Lobato', 10)">Ingrid Lobato              </span></li>
          <li class="nameFriends"><span id="11" class="del label label-inverse" onmouseover="mudar('Marcos Mourin ', 11)">Marcos Mourin             </span></li>
          <li class="nameFriends"><span id="12" class="del label label-inverse" onmouseover="mudar('Sabrina Romeni', 12)">Sabrina Romeni            </span></li>
          <li class="nameFriends"><span id="13" class="del label label-inverse" onmouseover="mudar('Théo Lopes  ', 13)">Théo Lopes                  </span></li>
          <li class="nameFriends"><span id="14" class="del label label-inverse" onmouseover="mudar('Ulisses Campos', 14)">Ulisses Campos            </span></li>
          <li class="nameFriends"><span id="15" class="del label label-inverse" onmouseover="mudar('Victor Liotto', 15)">Victor Liotto              </span></li>
          <li class="nameFriends"><span id="16" class="del label label-inverse" onmouseover="mudar('Victor Meirelles ', 16)">Victor Meirelles       </span></li>
          <li class="nameFriends ult del"><span id="17" class="del label label-inverse" onmouseover="mudar('Willian Mourinho', 17)">Willian Mourinho</span></li>
          <li class="nameFriends new ult"><span id="25" class="del label label-inverse" onmouseover="mudar('Victor Nakata', 25)">Victor Nakata   </span></li>
        </ul>

        @*Manipulação de dados*@
        @*----------------------------------------------------------------------------------------------------*@
        
        <ul class="thumbnails">
            <li class="photoFriends new-02"> <a href="#" class="thumbnail friend-22"> </a></li>
            <li class="photoFriends new-02"> <a href="#" class="thumbnail friend-16"> </a></li>          
        </ul>

        <ul class="thumbnails">
          <li class="nameFriends new-02"><span id="26" class="del label label-inverse" onmouseover="mudar('Victor Villena', 26)">Victor Villena     </span></li>
          <li class="nameFriends new-02"><span id="27" class="del label label-inverse" onmouseover="mudar('Willian Mourinho', 27)">Willian Mourinho</span></li>
        </ul> 


        <ul class="thumbnails myFriends">
          <li class="photoFriends"> <a href="#" class="thumbnail friend-13"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-14"> </a></li>
        </ul>

        <ul class="thumbnails myFriends">
          <li class="nameFriends"><span id="18" class="del label label-inverse" onmouseover="mudar('Victor Liotto', 18)">Victor Liotto    </span></li>
          <li class="nameFriends"><span id="19" class="del label label-inverse" onmouseover="mudar('Victor Meirelles', 19)">Victor Meirelles </span></li>
        </ul>     
        
         <ul class="thumbnails unknown">
          <li class="photoFriends"> <a href="#" class="thumbnail friend-17"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-18"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-19"> </a></li>
        </ul>

        <ul class="thumbnails unknown">
          <li class="nameFriends"><span id="20" class="add label label-inverse" onmouseover="mudar('Victor Guerrero', 20)">Victor Guerrero   </span></li>
          <li class="nameFriends"><span id="21" class="add label label-inverse" onmouseover="mudar('Victor Rebello', 21)">Victor Rebello     </span></li>
          <li class="nameFriends"><span id="22" class="add label label-inverse" onmouseover="mudar('Victor Villena', 22)">Victor Villena     </span></li>
        </ul>

        <ul class="thumbnails friendsOfFriends">
          <li class="photoFriends"> <a href="#" class="thumbnail friend-21"> </a></li>
          <li class="photoFriends"> <a href="#" class="thumbnail friend-20"> </a></li>
        </ul>

        <ul class="thumbnails friendsOfFriends">
          <li class="nameFriends"><span id="24" class="add label label-inverse" onmouseover="mudar('Victor Chevalier', 24)">Victor Chevalier   </span></li>
          <li class="nameFriends add"><span id="23" class="add label label-inverse" onmouseover="mudar('Victor Nakata', 23)">Victor Nakata   </span></li>
        </ul>
    </div>

    <div>
        <ul class="pager">
            <li class="previous disabled">
                <a href="#">&larr; Older</a>
            </li>
            <li class="next disabled">
                <a href="#">Newer &rarr;</a>
            </li>
        </ul>
    </div>
        
</div>


@*Script - hover: adicionar-remover amigo*@
    <script>
        function mudar(texto, id) {
            $('span.add').each(function () {
                $('#' + id).text('Adicionar');
                $(this).mouseleave(function () {
                    $(this).text(texto);
                });
            });

            $('span.del').each(function () {
                $('#' + id).text('Remover');
                $(this).mouseleave(function () {
                    $(this).text(texto);
                });
            });
        }    </script>